// 多个动态渐变blob，参考 fancy-border-radius 示例

(function() {
    // 参考 fancy-border-radius 示例，支持多色、不同透明度、不同速度、前后反转
    const BLOB_COUNT = 5;
    const BLOB_COLORS = [
        ['#00b4ff', '#ff00b4'],
        ['#ffb400', '#00ffb4'],
        ['#b400ff', '#00ffb4'],
        ['#ff4e50', '#1e90ff'],
        ['#43e97b', '#38f9d7']
    ];
    const BLOB_BASE_SIZE = 420;
    const BLOB_OPACITY = [0.32, 0.22, 0.18, 0.14, 0.10];
    const svgNS = 'http://www.w3.org/2000/svg';

    function createBlob(idx) {
        // 新参数：fancy-border-radius 56.34% 56% 76% 76% / 56% 76% 76% 56.34% @ 376x376
        // 并增加更大尺寸差异
        const baseSize = 376;
        const size = baseSize + Math.floor(Math.random() * 120) - 40; // 336~496
        const scale = 0.95 + Math.random() * 0.35;
        const center = size / 2;
        const svg = document.createElementNS(svgNS, 'svg');
        svg.setAttribute('width', size);
        svg.setAttribute('height', size);
        svg.setAttribute('viewBox', `0 0 ${size} ${size}`);
        svg.style.position = 'fixed';
        svg.style.left = `${50 + Math.sin(idx * 1.2) * 18}%`;
        svg.style.top = `${50 + Math.cos(idx * 1.2) * 18}%`;
        svg.style.transform = `translate(-50%,-50%) scale(${scale})`;
        svg.style.zIndex = '0';
        svg.style.pointerEvents = 'none';
        svg.style.opacity = BLOB_OPACITY[idx % BLOB_OPACITY.length];
        svg.style.filter = 'blur(0.5px)';

        const defs = document.createElementNS(svgNS, 'defs');
        const grad = document.createElementNS(svgNS, 'radialGradient');
        grad.setAttribute('id', `blob-grad-${idx}`);
        grad.setAttribute('cx', '50%');
        grad.setAttribute('cy', '50%');
        grad.setAttribute('r', '70%');
        grad.innerHTML = `
            <stop offset="0%" stop-color="${BLOB_COLORS[idx % BLOB_COLORS.length][0]}" stop-opacity="1"/>
            <stop offset="100%" stop-color="${BLOB_COLORS[idx % BLOB_COLORS.length][1]}" stop-opacity="0.7"/>
        `;
        defs.appendChild(grad);
        svg.appendChild(defs);

        const path = document.createElementNS(svgNS, 'path');
        path.setAttribute('fill', `url(#blob-grad-${idx})`);
        // fancy-border-radius 56.34% 56% 76% 76% / 56% 76% 76% 56.34% @ 376x376
        // 该参数下的path（由 fancy-border-radius 工具生成）
        path.setAttribute('d',
            'M 282 23 C 336 49 370 119 353 188 C 336 257 257 334 188 353 C 119 372 49 336 23 282 C -3 228 49 119 119 49 C 189 -21 228 -3 282 23 Z'
        );
        path.setAttribute('id', `blob-path-${idx}`);
        svg.appendChild(path);
        document.body.prepend(svg);
        return {svg, path, size, center, scale};
    }

    // 只做整体平移和旋转动画，不再动态变形，保证无交叉和扭曲
    function animateBlob(blob, idx, phase) {
        let t = Math.random() * 100;
        const speed = 0.008 + Math.random()*0.012;
        function animate() {
            t += speed;
            // 让svg整体缓慢漂移+缩放+旋转
            const px = 50 + Math.sin(t/7 + idx) * (18 + idx*2);
            const py = 50 + Math.cos(t/8 + idx) * (18 + idx*2);
            const rot = Math.sin(t/5 + idx) * 180;
            blob.svg.style.left = `${px}%`;
            blob.svg.style.top = `${py}%`;
            blob.svg.style.transform = `translate(-50%,-50%) scale(${blob.scale}) rotate(${rot}deg)`;
            requestAnimationFrame(animate);
        }
        animate();
    }
})();
